.cq-popup {
	--color-bg-popup: #fff;
	--width-popup: 50%;
	--height-popup: 50%;
	display: none;

	&.show {
		display: block;
	}

	.cq-popup--content {
		position: fixed;
		z-index: var(--z-index-top);
		width: var(--width-popup);
		height: var(--height-popup);
		background-color: var(--color-bg-popup);
	}

	&--center {
		.cq-popup--content {
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	&--top {
		.cq-popup--content {
			left: 50%;
			top: 0;
			transform: translate(-50%, -100%);
		}
	}

	&--bottom {
		.cq-popup--content {
			left: 50%;
			bottom: 0;
			transform: translate(-50%, 100%);
		}
	}

	&--left {
		.cq-popup--content {
			left: 0;
			top: 50%;
			transform: translate(-100%, -50%);
		}
	}

	&--right {
		.cq-popup--content {
			right: 0;
			top: 50%;
			transform: translate(100%, -50%);
		}
	}
}
